<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link href="../css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css"/>
    <link rel="stylesheet" href="../css/1px.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <title>转发</title>
    <style>
    
      .mui-content {
        font-size: 13px;
        background-color: #fff;
      }
      
      .flex {
        display: flex;
        margin-top: 5px;
      }
      
      .flex-item {
        flex: 1;
      }
      
      .conversion-id {
        padding: 2px 0;
      }
      
      .conversionId {
        margin-bottom: 2px;
      }
      
      .to-store {
        margin-bottom: 2px;
      }
      
      .to-store span {
        margin-left: 5px;
      }
      /**/
      
      .purchase-link {
        float: right;
        margin-right: 10px;
      }
      /*列表*/
      
      .goods-list {
        list-style: none;
      }
      .title-box {
				background-color: #F8F8F8;
				height: 30px;
				line-height: 30px;
			}
			
			.img-box-title {
				flex: 2;
				text-align: center;
			}
			
			.number-title {
				flex: 4;
				text-align: center;
			}
			
			.op-title {
				flex: 3;
				text-align: center;
			}
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
       .bgGray{
      	background-color: #F8F8F8;
      }
      .img-box {
        flex: 2;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
        height: 100%;
      }
      
      .withdraw-num {
        margin-left: 10px;
      }
      
     
			.bottom-change-box {
				padding: 5px 2px;
				position: relative;
			}
			
			.bottom-change-box:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				top:0px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #CCCCCC;
			}
			
			.bottom-change-box .choose-btn {
				width: 60px;
				height: 28px;
				line-height: 14px;
				float: right;
				background-color: #FF9800;
				border-color: #FF9800
			}
			
			.bottom-change-box .choose-icon {
				display: inline-block;
				float: right;
				width: 26px;
				color: #C0BFC4;
				font-size: 20px;
				margin-right: 10px;
			}
      /*滚动区*/
      
      .mui-scroll-wrapper {
        top: 50px;
        bottom: 39px;
      }
      /*底部*/
      
     footer {
				height: 38px;
				line-height: 38px;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				font-size: 15px
			}
			
			footer:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 38px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.back-btn {
				background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			
			.next-btn {
				background-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
      /**/
          /**/
     .mui-popover {
				height: 100px;
			}
			.mui-popover .mui-scroll-wrapper{
				top: 0;
				bottom: 0;
				padding: 10px;
			}
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div class="conversion-id vux-1px-b">
        <p class="conversionId">&emsp;转发单号：<span></span></p>
        <p class="to-store">&emsp;目标门店：<span></span></p>
      </div>
      <!---->
      <!---->
      <div id="refreshContainer" class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="goods-list mui-table-view mui-table-view-chevron">

          </ul>
          <!---->
          <script id="withdrawLi" type="text/html">
          	<div class="flex title-box">
								<div class="img-box-title">礼品</div>
								<div class="number-title">数量</div>
								<div class="op-title">操作</div>
							</div>
            <% for(var i=0; i<list.length; i++) {%>
          		<%if(i%2===0){%>
            		  <li class="goods-each">
            		<%}else {%>
            			<li class="goods-each bgGray">
            			<%}%>
              <div class="flex">
                <div class="img-box">
                  <a href="#middlePopover" class="img-info" index="<%=i%>" ><img src="<%=imgPath+list[i].cutImg%>" alt="" /></a>
                </div>
                <div class="goods-info-box">
                  <div class="goods-name">
                    <%=list[i].goodsName%>
                  </div>
                  <div class="goods-id">货品ID：
                    <%=list[i].goodsId%>
                  </div>
                  <div class="goods-num">门店库存：
                    <%=list[i].shopGoodsAmount%>
                  </div>
                </div>
                <div class="goods-op-box">
 								<span class="withdraw-num">转发数：
                		<%=list[i].conversionAmount%>
                </span>               
                </div>
              </div>
              <div class="bottom-change-box mui-clearfix">
										<div class="mui-btn mui-btn-primary choose-btn sure-choose-btn" index=<%=i %> data-id="<%=list[i].goodsId%>">调整</div>
										<i class="iconfont icon-delete choose-icon delete-icon" index=<%=i%> data-id="<%=list[i].goodsId%>"></i>
							</div>
            </li>
            <%}%>
          </script>
          <!---->
          </div>
        </div>
      </div>
      <!--底部-->
      <footer class="flex btn-box">
        <div class="flex-item">
         <div class="mui-btn back-btn mui-action-back">上一步</div>
        </div>
        <div class="flex-item">
          <div class="mui-btn next-btn">提交申请</div>
        </div>
      </footer>
      <!---->
         <!--显示附加信息-->
    <div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="fullName">规格：<span></span></p>
					<p class="tags">用途：<span></span></p>
					<p class="score">积分：<span></span></p>
				</div>
			</div>
		</div>
		<!---->
  </body>
  <script src="../config.js"></script>
  <script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/mui.min.js"></script>
  <script src="../js/mui.picker.js"></script>
  <script src="../js/mui.poppicker.js"></script>
  <script>
    (function($, doc) {
      var currentShopObj,
        pageList = [],
        conversionGoods = {
          conversion: {
            storeId: '',
            storeName: '',
            toStoreId: '',
            toStoreName: '',
            recivedStatus: 1,
            conversionId: ''
          },
          goodsList: []
        },
        conversionId = ''
      $.init({
        beforeback: function() {
          //获得列表界面的webview
          var transfer = plus.webview.getWebviewById('transfer')
          $.fire(transfer, 'changeList', {
            goodsList: conversionGoods.goodsList,
            conversionId: conversionGoods.conversion.conversionId
          });
          //返回true，继续页面关闭逻辑
          return true;
        },
      })
      $.plusReady(function() {
        receiveParam()
      })
      $.ready(function() {
        bindEvent()
      })
      //滚动
      $('.mui-scroll-wrapper').scroll({
        scrollY: true,
        bounce: true,
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
      });

      function pullupRefresh() {
        mui('.mui-scroll-wrapper').scroll().reLayout();
        var that = this
        setTimeout(function() {
          that.endPullupToRefresh(true);
        }, 2000)
      }

      function receiveParam() {
        var self = plus.webview.currentWebview();
        currentShopObj = self.currentShopObj;
        conversionId = self.conversionId
        pageList = conversionGoods.goodsList = self.conversionGoods
        conversionGoods.conversion.conversionId = self.conversionId
        conversionGoods.conversion.toStoreId = self.toStoreId
        conversionGoods.conversion.toStoreName = self.toStoreName
        conversionGoods.conversion.storeId = self.currentShopObj.storeId
        conversionGoods.conversion.storeName = self.currentShopObj.storeName
        tags = self.tags
        types = self.types
        document.querySelector(".conversionId span").innerText = conversionId
        document.querySelector(".to-store span").innerText = conversionGoods.conversion.toStoreName
        setTimeout(function() {
          setPage()
        }, 0)
      }

      function bindEvent() {
        //调整
        $('.goods-list').on('tap', '.sure-choose-btn', function(e) {
          var goodsId = this.getAttribute('data-id')
          var index = this.getAttribute('index')
          var btnArray = ['取消', '确定'];
          mui.prompt('请输入转发数量', pageList[index].refundAmount ? pageList[index].refundAmount : 0, '', btnArray, function(e) {
            if(e.index == 1) {
              if(e.value) {
                pageList[index].refundAmount = e.value * 1
                var goodsBox = doc.getElementsByClassName("goods-op-box")
                document.getElementsByClassName("withdraw-num")[index].innerText = '转发数：' + e.value
                conversionGoods.goodsList[index].conversionAmount = pageList[index].conversionAmount = e.value
              } else {}
            } else {}
          }, 'div')
          document.querySelector('.mui-popup-input input').type = 'number'
        })
        //删除
        $('.goods-list').on('tap', '.delete-icon', function() {
          var goodsId1 = this.getAttribute('data-id')
          var index1 = this.getAttribute('index')
          var goodsBox = doc.getElementsByClassName("goods-op-box")
          var btnArray = ['否', '是'];
          mui.confirm('删除货品', '', btnArray, function(e) {
            if(e.index == 1) {
              conversionGoods.goodsList.splice(index1, 1)
              setPage()
            } else {}
          })

        })
        //显示用途
        $('.goods-list').on('tap','.img-info',function(e){
        	var ind = this.getAttribute('index')
        	if(conversionGoods.goodsList[ind].goodsType){
        		var typeFullName = conversionGoods.goodsList[ind].goodsType
        	} else {
        		var typeFullName = conversionGoods.goodsList[ind].typeFullName
        	}
        		var tags = ''
        		conversionGoods.goodsList[ind].tags.forEach(function(item){
        			tags += item.tagDescribe+' '
        		})
        		document.querySelector(".fullName span").innerText = typeFullName
        	  document.querySelector(".tags span").innerText = tags
        	  document.querySelector(".score span").innerText = conversionGoods.goodsList[ind].score
        })
        //		下一步
        $('.btn-box').on('tap', '.next-btn', function() {
          if(conversionGoods.goodsList.length > 0) {
            config.ajax({
              type: "post",
              url: config.basePath + "/conversion/writeDraft",
              async: true,
              data: conversionGoods,
              headers: {
                'Content-Type': 'application/json'
              },
              success: function(res) {
                if(res.result === 1) {
                  //刷新列表页面
                  var transferList = plus.webview.getWebviewById('transferList')
                  if(transferList) {
                    $.fire(transferList, 'changeList', '');
                  }
                  //
                  var titleText = currentShopObj.storeName + '-转发'
                  if(!conversionId) {
                    conversionId = res.conversionId
                  }
                  $.openWindow({
                    url: 'transferList.html',
                    id: 'transferList',
                    styles: {
                      top: 0, //新页面顶部位置
                      bottom: 0, //新页面底部位置
                      titleNView: {
                        titleText: titleText,
                        titleColor: "#FFFFFF",
                        titleSize: "17px",
                        backgroundColor: "#FF6800",
                        autoBackButton: true,
                        buttons: [{
                          float: "right",
                          fontSize: "18px",
                          fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                          text: "\ue602",
                          onclick: function() {
                            var allPage = plus.webview.all()
                            var nowPage = plus.webview.getWebviewById('index')
                            for(var i = 0; i < allPage.length; i++) {
                              if(allPage[i].getURL() !== nowPage.getURL()) {
                                plus.webview.close(allPage[i]);
                              }
                            }
                          }
                        }],
                        splitLine: {
                          color: "#CCCCCC",
                          height: "1px"
                        }
                      }
                    },
                    extras: {
                      currentShopObj: currentShopObj,
                      type:2
                    },
                  })
                } else {
                  $.toast(res.errormsg)
                }
              }
            });
          } else {
            $.toast('请选择货品');
          }
        })
      }
      //页面
      function setPage() {
        var html = template('withdrawLi', {
          list: pageList,
          imgPath: config.imgPath
        })
        $('.goods-list')[0].innerHTML = html
      }
    }(mui, document))
  </script>

</html>